<template>
  <div class='main'>
    <div>
      <input type='text' value='' v-model="city" @keydown.enter.exact="searchWeather"/>
      <input type="submit" @click.prevent="searchWeather" value="提交"/>
    </div>
    <div>
      <h3>{{city}}---{{locationWeather}}</h3>
    </div>
    <transition v-if="show" name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
      <div>dsffffffffffffff</div>
    </transition>
    <!-- 父子间传值 -->
    <textComp1 @childToParent='changeCity($event)' v-for='(item,index) in citys' :key='index' :title="item" :index='index'></textComp1>
    <!-- <textComp :title="city" :action='changeEvent'></textComp> -->
    <h1>选中的城市：{{school}}</h1>
    <textComp2 :userName='userName' @toParent='chileInput($event)'><div>插槽</div></textComp2>
    <h2>子传父input值{{userName}}</h2>
    <button v-for='(item,index) in navigation' :key='"index"+index' @click="compon(index)">{{item}}</button>
    <component :is="comp"></component>
    <textComp3 :name='name' @fromChild3='fromChild3($event)'></textComp3>
    <textComp4 :fromChild3='fromChild3'></textComp4>
    <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tv&skin=durian" frameborder="0" width="255" height="25" allowtransparency="true"></iframe>
  </div>
</template>
<script>
import textComp1 from '@/components/textComp'
import textComp2 from '@/components/textComp2'
import textComp3 from '@/components/textComp3'
import textComp4 from '@/components/textComp4'
export default {
  data () {
    return {
      userName: '',
      city: '',
      citys: ['北京', '上海', '广州', '深圳'],
      school: '清华',
      navigation: ['组件一', '组件二', '组件三', '组件四'],
      comp: 'textComp3',
      name: '父传三',
      show: false,
      locationWeather: ''
    }
  },
  methods: {
    searchWeather: async function () {
      console.log(this.city)
      // eslint-disable-next-line no-unused-vars
      let httpUrl = `https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=76c722a6e1284d8bbf170adc9c9a5873`
      let res = await fetch(httpUrl)
      let resResult = await res.json()
      console.log(resResult)
      // eslint-disable-next-line eqeqeq
      if (resResult.HeWeather6[0].status == 'ok') {
        this.locationWeather = resResult.HeWeather6[0].now.cond_txt
      }
      this.show=true
    },
    changeCity: function (name) {
      this.school = name
    },
    chileInput: function (val) {
      this.userName = val
    },
    compon: function (id) {
      for (var i = 0; i < this.navigation.length; i++) {
        // eslint-disable-next-line eqeqeq
        if (id == i) {
          this.comp = 'textComp' + (i + 1)
        }
      }
      // if (id == 0) {
      //   this.comp = 'textComp2'
      // } else {
      //   this.comp = 'textComp4'
      // }
    },
    fromChild3: function (e) {
      console.log(e)
    }
    // ,
    // changeEvent: function (name) {
    //   this.school = name
    // }
  },
  components: {
    textComp1,
    textComp2,
    textComp3,
    textComp4
  }
}
</script>

<style scoped>
  input{
    border: 1px solid #ccc;
  }
</style>
